<template>
	<!-- //日历盒子 -->

	<!--  改	https://ext.dcloud.net.cn/plugin?id=6908 -->

	<view class="zui-SignIn">
		<!-- <u-gap height="260rpx"></u-gap> -->

		<view class="miss_box">
			<!-- 顶部图片 -->
		<!-- 	<view class="logo"><image src="~@/static/img/clockin_icon01.png"></image></view>
			<u-gap height="80rpx"></u-gap> -->
			<!-- //切换 -->
			<view class="switch_box">
				<view class="left" @click="lastMonth"><u-icon color="#fff" name="arrow-left"></u-icon></view>
				<view class="middle">{{ year }}年{{ month }}月</view>
				<view class="right" @click="nextMonth"><u-icon color="#fff" name="arrow-right"></u-icon></view>
			</view>
			<!-- //周 -->
			<view class="week_box">
				<view class="item" v-for="(weeks, index) in weekArr" :key="index">{{ weeks }}</view>
			</view>
			
			<view class="day_box">
				<view v-for="(item, index) in dayArr" :key="index" class="item">
					<!-- 补充出来的日期-->
					<view v-if="item.date == ''" class="checkday">{{ item.day }}</view>
					
					<view v-else>
						<!-- 已签到日期 -->
						<view v-if="item.flag" class="choose flag">
							<text>{{ item.day }}</text>
						</view>
						
						<!-- 今日未签到-->
						<!-- <view @click="clickSignUp(item.date)" class="today" v-else-if="item.date == localDate"><text>签到</text></view> -->
						<!-- 当前日期之后 -->
						<view v-else>
							<text>{{ item.day }}</text>
						</view>
					</view>
					
					<view v-if="item.order" class="circle"></view> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		bgday: {
			type: String,
			default: '#00C172'
		},
	},
	data() {
		return {
			SignUp: [], //已经签到的数组
			OrderUp: [], //已下单的数组
			dayArr: [], // 当前月每日
			localDate: '', // 今天日期
			year: new Date().getFullYear(), // 当前年
			month: new Date().getMonth() + 1, // 当前月
			day: new Date().getDate(), // 当前日
			weekArr: ['日', '一', '二', '三', '四', '五', '六'], // 每周
			aheadDay: 0, // 前方空白天数数量
			thisMonth: new Date().getMonth() + 1
		};
	},
	mounted() {
		let that = this;
		// 初始日期
		that.initDate(); 
		// 今天日期
		that.localDate = that.year + '/' + that.formatNum(that.month) + '/' + that.formatNum(that.day);
	},
	methods: {
		update(val,order){
			setTimeout(()=>{ 
				console.log(val,'---',order)
				this.SignUp = val;
				this.OrderUp = order; //已下单的数组
				this.initDate();
				this.onJudgeSign();
				this.$forceUpdate();
			},0)
		},
		// 初始化日期
		initDate() {
			let that = this;
			that.dayArr = [];
			// 当前月总天数
			let totalDay = new Date(that.year, that.month, 0).getDate();
			// 遍历总天数将日期逐个添加至数组
			for (let i = 1; i <= totalDay; i++) {
				// 得到需补充天数
				let value = new Date(that.year, that.month - 1, i).getDay();
				// 补充前面空白日期
				if (i == 1 && value != 0) {
					that.addBefore(value);
					that.aheadDay = value;
				}
				// 添加本月日期
				let obj = {};
				obj.date = that.year + '/' + that.formatNum(that.month) + '/' + that.formatNum(i);
				obj.day = i;
				that.dayArr.push(obj);
				// 补充后面空白日期 
				if (i == totalDay && value != 6) that.addAfter(value);
			}
		},
		

		onJudgeSign() {
			var daysArr = this.dayArr;
			var signs = this.SignUp;
			var OrderUp = this.OrderUp;
			
			// 赋值订单 
			
			for (var i = 0; i < OrderUp.length; i++) {
				var current = new Date(OrderUp[i].replace(/-/g, '/'));
				var year = current.getFullYear();
				var month = current.getMonth() + 1;
				var day = current.getDate();
				day = parseInt(day);
				for (var j = 0; j < daysArr.length; j++) {
					
					
					console.log(12,daysArr[j]);
					//年月日相同则打卡成功
					if (year == this.year && month == this.month && daysArr[j].day == day) {
						console.log(daysArr[j].order);
						daysArr[j].order = true;
						
					}
				}
			}
			
			// 赋值签到
			
			for (var i = 0; i < signs.length; i++) {
				var current = new Date(signs[i].replace(/-/g, '/'));
				var year = current.getFullYear();
				var month = current.getMonth() + 1;
				var day = current.getDate();
				day = parseInt(day);
				for (var j = 0; j < daysArr.length; j++) {
					
					//年月日相同则打卡成功
					if (year == this.year && month == this.month && daysArr[j].day == day) {
					
						daysArr[j].flag = true;
						
					}
				}
			}
			
			this.dayArr = daysArr;
		},
		// 补充前面空白日期
		addBefore(value) {
			let that = this;
			let totalDay = new Date(that.year, that.month - 1, 0).getDate();
			for (let i = 0; i < value; i++) {
				let obj = {};
				obj.date = '';
				obj.day = totalDay - (value - i) + 1;
				that.dayArr.push(obj);
			}
		},
		// 补充后空白日期
		addAfter(value) {
			let that = this;
			for (let i = 0; i < 6 - value; i++) {
				let obj = {};
				obj.date = '';
				obj.day = i + 1;
				that.dayArr.push(obj);
			}
		},
		// 格式化日期位数
		formatNum(num) {
			return num < 10 ? '0' + num : num;
		},
		// 上一个月
		lastMonth() {
			let that = this;
			if (that.month == 1) {
				that.year -= 1;
				that.month = 12;
			} else {
				that.month -= 1;
			}
			that.initDate();
			let month = 0;
			if (that.month < 10) {
				month = `0${that.month}`;
			} else {
				month = that.month;
			}
			this.$emit('dateChange', this.year + '-' + month); //传给调用模板页面去拿新数据
		},
		// 下一个月
		nextMonth() {
			let that = this;
			if (that.month == 12) {
				that.year += 1;
				that.month = 1;
			} else {
				that.month += 1;
			}
			that.initDate();
			let month = 0;

			if (that.month < 10) {
				month = `0${that.month}`;
			} else {
				month = that.month;
			}
			this.$emit('dateChange', this.year + '-' + month); //传给调用模板页面去拿新数据
		},
		//、、、、、、、、、、、、、、、、、、、、、、、

		clickSignUp(date, type) {
			this.$emit('clickSign'); //调用父亲的签到
		}
	}
};
</script>

<style scoped lang="scss">
.zui-SignIn {
	width: 100%;
	flex-direction: column;
	justify-content: center;
	padding: 40rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.miss_box {
	position: relative;
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	background-color: #232539;
	border-radius: 25rpx;
	font-size: 30rpx;

	.logo {
		position: absolute;
		margin: 0 auto;
		left: 0;
		right: 0;
		transform: translateY(-300rpx);
		width: 470rpx;
		height: 366rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.switch_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 30rpx 0;
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;

		.left {
			width: 46rpx;
			height: 46rpx;
			background: #f1b863;
			color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.middle {
			color: #ffe5a5;
			font-size: 30rpx;
		}

		.right {
			width: 46rpx;
			height: 46rpx;
			background: #f1b863;
			color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.picker {
		width: 160rpx;
		height: 40rpx;
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.week_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		color: #fff;

		.item {
			width: 70rpx;
			height: 70rpx;
			margin: 10rpx;
			text-align: center;
			position: relative;
			line-height: 70rpx;
		}
	}

	.day_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		color: #fff;
		flex-wrap: wrap;

		.item {
			width: 70rpx;
			height: 70rpx;
			margin: 10rpx;
			text-align: center;
			position: relative;
			line-height: 70rpx;
		}

		.today {
			background: #00c172;
			border-radius: 50%;
		}

		.flag {
			background: #70e23b;
			border-radius: 50%;
		}

		.checkday {
			color: #999;
		}

		.choose {
			color: #ffffff;
			border-radius: 50%;
		}

		.circle {
			background: #F1B863;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			position: absolute;
			bottom: -30%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.sign {
			background-color: #fff;
		}

		.repair {
			background-color: #fff;
		}
	}
}

.but {
	display: flex;
	flex: 1;
	margin-top: 80rpx;
	justify-content: center;
}

.but button {
	width: 650rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 30rpx;
	border: 1px solid transparent;
	outline: none;
	color: #ffffff;
	font-size: 32rpx;
}

uni-button:after {
	border: none;
}
</style>
